<template>
  <div style="width:100%;height:100%">
    <iframe
      src="http://localhost:8099/"
      style="width: 100%; height: 100%; overflow: hidden"
      frameborder="0"
      allowTransparency="true"
    ></iframe>
  </div>
</template>

<script>
import resourceApi from "@/api/resource";
export default {
  props: {
    view: {
      default: function() {
        return {
          customerOptions: {}
        };
      }
    }
  },
  computed: {
    headLinks() {
      return this.view.headLinks;
    },
    otherOptions() {
      return {
        customerOptionsValues: (this.view.customerOptions || {}).values,
        codes: this.view.codes,
        htmlbody: this.view.htmlbody
      };
    }
  },
  watch: {
    otherOptions: {
      handler(newValue) {
        if (newValue) this.setScript();
      }
    },
    headLinks: {
      handler(newValue) {
        if (newValue) this.reload();
      }
    }
  },
  data: function() {
    return {
      iframe: {},
      contentWindow: {},
      previewUrl: "editpreviewtemplate.html"
    };
  },
  mounted() {
    this.iframe = this.$el.getElementsByTagName("iframe")[0];
    this.iframe.onload = this.onloadedHandler;
    this.iframe.src = this.previewUrl;
  },
  methods: {
    reload() {
      this.iframe.src = this.previewUrl + "?" + new Date();
    },
    setHeaders() {
      try {
        //console.log("this.view.headLinks", this.view.headLinks);
        //if(! this.view.headLinks) return;
        debugger;
        var headers = this.replaceFileDir(
          eval("(" + this.view.headLinks + ")")
        );
        this.contentWindow.setHeaders(headers);
      } catch (e) {
        //console.warn(e,this.view.headLinks);
      }
    },
    setScript() {
      
      try {
        this.contentWindow.setBody(this.view.htmlbody);
      } catch (e) {
        //console.warn(e,"this.view.htmlbody",this.view.htmlbody);
      }

      try {
        var optionValues = eval("(" + this.view.customerOptions.values + ")");
        this.contentWindow.setOptionAnRun(optionValues, this.view.codes);
      } catch (e) {
        //console.warn(e,"this.view.customerOptions.values",this.view.customerOptions.values);
      }
    },
    onloadedHandler(event) {
      this.contentWindow = this.iframe.contentWindow;
      this.setHeaders();
      this.setScript();
    },
    replaceFileDir(headers) {
      //替换文件参数变量未缓存文件目录
      debugger;
      for (var index in headers) {
        var header = headers[index];
        var tagname = header.tagname;
        if (tagname == "script" && header.attrs.src.indexOf("{filedir}") > -1) {
          this.view.resources.forEach(res => {
            //判断文件是否包含是，去掉匹配的文件的后缀，因为有些可能是压缩包
            var fileName = res.fileName.split(".");
            fileName.pop();
            fileName = fileName.join(".");

            if (header.attrs.src.indexOf(fileName) > -1) {
              header.attrs.src = header.attrs.src.replace(
                "{filedir}",
                resourceApi.getResourceTempPreviewUrl(res.fileId)
              );
            }
          });
        }
      }
      return headers;
    }
  }
};
</script>

<style></style>
